<template>
  <div ref="refsSearchPictureListDetailComponentBox">
    <div class="picture-view-list-box" :style="`height: ${mainHeight}px;`">
        <h1>{{ pictureContentView.index.title }}</h1>
        <template v-for="(item, index) in pictureContentView.fileList" :key="index">
            <el-image 
                fit="cover" 
                :preview-src-list="fullPathList" 
                :infinite="false" 
                :src="item.fullPath" 
            />
        </template>
    </div>
  </div>
</template>

<script>
import { PictureContentView } from '@/views/index.js'
export default {
    beforeUpdate() {/* */},
    beforeCreate() {/** */},
    beforeMount() {
        this.$nextTick(() => {
            // 根据浏览器高度设置初始高度
            const refsSearchHeader = this.$refs.refsSearchPictureListDetailComponentBox.parentElement.parentElement.parentElement.firstElementChild
            const refsSearchTab = this.$refs.refsSearchPictureListDetailComponentBox.parentElement.firstElementChild
            const refsSearchFooter = this.$refs.refsSearchPictureListDetailComponentBox.parentElement.parentElement.parentElement.children[2]
            // 监听浏览器高度变化，修改表格高度
            this.mainHeight = document.body.offsetHeight
                - refsSearchHeader.offsetHeight
                - refsSearchTab.offsetHeight
                - refsSearchFooter.offsetHeight
            window.addEventListener('resize', () => {
                this.mainHeight = document.body.offsetHeight
                    - refsSearchHeader.offsetHeight
                    - refsSearchTab.offsetHeight
                    - refsSearchFooter.offsetHeight
            })
        })
    },
    computed:{
        fullPathList(){
            return this.pictureContentView.fileList.map(f=>f.fullPath)
        }
    },
    props:{
        pictureContentView :{
            type: PictureContentView,
            default: PictureContentView.defaultView
        }
    },
    data(){
        return {
            mainHeight: 0,
        }
    }
}
</script>

<style>
.picture-view-list-box {
    overflow-y: auto;
    background-color: #1E1E1E;
}
.picture-view-list-box h1 {
    margin: 0 !important;
    color: #FFB27D;
}
.picture-view-list-box .el-image {
    height: 450px;
    width: 650px;
}
</style>